<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>注册 - 可穿戴心电监测平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // ✅ 动态显示所属医生选项
    function toggleDoctorSelect() {
      const role = document.getElementById("role").value;
      const doctorSelect = document.getElementById("doctor-section");
      if (role === "user") {
        doctorSelect.classList.remove("hidden");
      } else {
        doctorSelect.classList.add("hidden");
      }
    }
  </script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

  <div class="bg-white shadow-xl rounded-xl p-8 w-full max-w-lg">
    <h1 class="text-2xl font-bold text-blue-600 text-center mb-6">🩺 注册账户</h1>

    {% if msg %}
    <div class="mb-4 p-3 text-center text-red-600 bg-red-100 rounded">{{ msg }}</div>
    {% endif %}

    <form method="post" action="/register" class="space-y-4">
      <!-- 用户名 -->
      <div>
        <label class="block text-gray-700 font-medium mb-1">用户名</label>
        <input type="text" name="username" value="{{ username or '' }}" required
               class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
      </div>

      <!-- 邮箱 -->
      <div>
        <label class="block text-gray-700 mb-1">邮箱（可选）</label>
        <input type="email" name="email" value="{{ email or '' }}"
               placeholder="可不填" class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
      </div>


      <!-- 手机号 -->
      <div>
        <label class="block text-gray-700 font-medium mb-1">手机号 <span class="text-red-500">*</span></label>
        <input type="text" name="phone" value="{{ phone or '' }}" placeholder="请输入手机号" required
               class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
      </div>

      <!-- 密码 -->
      <div>
        <label class="block text-gray-700 font-medium mb-1">密码</label>
        <input type="password" name="password" value="{{ password or '' }}" required
               placeholder="请输入密码（至少6位，不超过13位）"
               class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
      </div>

      <!-- 确认密码 -->
      <div>
        <label class="block text-gray-700 font-medium mb-1">确认密码</label>
        <input type="password" name="confirm_password" value="{{ confirm_password or '' }}" required
               placeholder="请再次输入密码"
               class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
      </div>

      <!-- 所属医生（仅普通用户显示） -->
      <div>
        <label class="block text-gray-700 mb-1">所属医生（可选）</label>
        <select name="doctor_id" class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
          <option value="">请选择医生（可不选）</option>
          {% for d in doctors %}
          <option value="{{ d.id }}" {% if doctor_id == d.id %}selected{% endif %}>{{ d.username }}</option>
          {% endfor %}
        </select>
      </div>


      <!-- 验证码 -->
      <div class="flex items-center space-x-2">
        <div class="flex-1">
          <label class="block text-gray-700 font-medium mb-1">验证码</label>
          <input type="text" name="captcha" required placeholder="请输入验证码"
                 class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-400 focus:outline-none">
        </div>
        <img src="/captcha" onclick="this.src='/captcha?'+Math.random()" class="h-10 cursor-pointer rounded border" title="点击刷新验证码">
      </div>

      <!-- 注册按钮 -->
      <div class="pt-4">
        <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">
          注册
        </button>
      </div>

      <p class="text-center text-gray-600 mt-3">
        已有账号？
        <a href="/login" class="text-blue-600 hover:underline">前往登录</a>
      </p>
    </form>
  </div>

  <!-- 初始化医生选择状态 -->
  <script>
    window.onload = toggleDoctorSelect;
  </script>

</body>
</html>
